<script>
import BookApi from '../../api/book';
import BookSearchView from './BookSearchView.vue'; // 书籍搜索组件
import MyPagination from '../../components/MyPagination.vue'; // 分页组件

export default {
  components: {
    BookSearch: BookSearchView, // 正确注册BookSearch组件
    MyPagination // 注册分页组件
  },
  data() {
        return {
            bookList: [],
            total: 0,
            pageSize: 7,
            curPage: 0,
            limit: -1,
            offset: -1
        }
    },
  methods: {
    // 获取书籍列表
    async getBookList(limit = -1, offset = -1) {
      try {
        let orderBy = "created_time";
                let sort = "DESC";
        const api = new BookApi();
        const res = await api.findAll(limit, offset, orderBy, sort);
        this.bookList = res.data || []; // 确保获取到数据是数组
        console.log(this.bookList);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
     async getCount() {
            try {
                const api = new BookApi();
                let res = await api.getCount();
                this.total = res.data.total;
                console.log(this.total);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
    // 搜索结果处理方法
    async searchResult(data) {
      this.bookList = data;
    },
    // 分页组件跳转方法
    goto(page) {
      // 更新当前页码并重新获取数据
      this.curPage = page;
      this.offset = (page - 1) * this.pageSize;
      this.getBookList(this.limit, this.offset);
    }
  },
  
  async mounted() {
        this.curPage = 1;
        this.limit = this.pageSize;
        this.offset = 0;
        await this.getCount();
        await this.getBookList(this.limit, this.offset);
    }
};
</script>

<template>
  <div class="book-list">
    <div class="header">
      <!-- 分页组件 -->
      <my-pagination :total="total" :page-size="pageSize" :cur-page="curPage" :show-info="true" @goto="goto"/>
      <!-- 书籍搜索组件 -->
      <book-search @search-result="searchResult"></book-search>
    </div>

    <!-- 书籍列表 -->
    <ul>
      <li v-for="book in bookList" :key="book.id">
        <img :src="book.pic" :alt="book.title" referrerpolicy="no-referrer" />
        <p>
          <span class="title">
            <router-link :to="'/book/' + book.id">{{ book.title }}</router-link>
          </span>
          <span class="author">{{ book.author }}</span>
          <span class="isbn">{{ book.isbn }}</span>
        </p>
      </li>
      <!-- 添加书籍按钮 -->
      <li>
        <router-link to="/book/add" class="a-img">
          <span class="add-text">添加书籍</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<style scoped>
ul {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: center; /* 居中对齐 */
  gap: 16px; /* 元素之间的间距 */
}

li {
  list-style-type: none;
  box-sizing: border-box;
  flex: 0 1 calc(25% - 16px); /* 每行显示4个，适应不同屏幕宽度 */
  background-color: rgba(92, 92, 92, 0.1);
  display: flex;
  margin: 8px;
  padding: 16px;
  border-radius: 16px;
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}

li:hover {
  background-color: rgba(120, 110, 255, 0.3);
}

li img {
  width: 120px;
  height: 165px;
  object-fit: cover; /* 确保图片不变形 */
}

li p {
  margin-left: 8px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
}

li p span {
  margin-top: 5px;
}

li:last-of-type .a-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 165px;
  background: url('@/assets/add-one.svg') no-repeat center center/80px;
}

li:last-of-type .a-img:hover {
  background: url('@/assets/add-one-hover.svg') no-repeat center center/80px;
}

li:last-of-type .add-text {
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease;
}

li:last-of-type .a-img:hover .add-text {
  opacity: 1;
}
</style>